<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>类别列表</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
    <link href="/css/admin/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/admin/style.min.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>

</head>
<body>
<div class="container-fluid">

    <div style="margin-top: 20px; height: 60px;">
        <button id="btn_add" type="button" class="btn btn-primary m-r-5" data-toggle="modal" data-target="#myModal">
            <span class="mdi mdi-plus" aria-hidden="true"></span>新增
        </button>
    </div>


    <div class="table-responsive">
        <table class="table table-hover table-bordered" style="text-align: center" aria-describedby="orderTable">
            <tr>
                <th style="text-align: center">ID</th>
                <th style="text-align: center">名称</th>
                <th style="text-align: center">访问路径</th>
                <th style="text-align: center">状态</th>
                <th style="text-align: center">操作</th>
            </tr>
            <c:forEach items="${page.list}" var="type">
                <tr>
                    <td><p>${type.id}</p></td>
                    <td><p>${type.typeName}</p></td>
                    <td><p>${type.typeUrl}</p></td>
                    <td>
                        <c:choose>
                            <c:when test="${type.status == 1}">
                                <p style="color: green">启用</p>
                            </c:when>
                            <c:otherwise>
                                <p style="color: red">禁用</p>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary m-r-5"
                                onclick="editType(${type.id})">
                            <span class="mdi mdi-update" aria-hidden="true"></span>修改
                        </button>

                        <button type="button" class="btn btn-danger"
                                onclick="deleteType(${type.id})">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         style="display: none">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <form class="site-form" action="#" method="post" id="typeForm">

                        <input type="hidden" name="id" id="typeId" />

                        <div class="form-group">
                            <label for="typeName">名称</label>
                            <input type="text" class="form-control" name="typeName" id="typeName" required="required"
                                   autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label for="typeName">访问路径</label>
                            <input type="text" class="form-control" name="typeUrl" id="typeUrl" required="required"
                                   autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label for="typeName">状态</label>
                            <select class="form-control" id="status" name="status" size="1">
                                <option value="">请选择</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="submitForm()">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <br>
    <c:choose>
        <c:when test="${!empty page.list}">
            <jsp:include page="./pagination.jsp">
                <jsp:param value="bookmall/admin/types" name="url" />
            </jsp:include>
        </c:when>

        <c:otherwise>
            <div style='text-align:center; color: #33cabb;'>暂无数据...</div>
        </c:otherwise>
    </c:choose>
    <br>
</div>
<script>

    /**
     * 编辑
     * @param id
     */
    function editType(id) {
        $("#myModalLabel").html("修改");

        $.get('/bookmall/admin/type/' + id, function (res) {
            $("#typeId").val(res.id);
            $("#typeName").val(res.typeName);
            $("#typeUrl").val(res.typeUrl);
            $("#status").val(res.status);
        });
        // 显示模态框
        $('#myModal').modal('show');
    }

    /**
     * 删除
     * @param id
     */
    function deleteType(id) {
        layer.open({
            content: '确 定 要 删 除 ID 为: ' + id + '  的 类 目 所 有 信 息 吗 ？',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                $.get('/bookmall/admin/type/remove/' + id, function (res) {
                    if (res) {
                        layer.msg("信息删除成功~", {time: 1500}, function () {
                            window.parent.parent.document.getElementById("multitabs_types").contentWindow.location.reload(true);
                        });
                    } else {
                        layer.msg("信息删除失败！请确认信息是否完整或联系管理员!", {time: 2000}, function () {
                            window.parent.parent.document.getElementById("multitabs_types").contentWindow.location.reload(true);
                        });
                    }
                });
            },
            btn2: function (index, layero) {
                layer.msg("已取消操作...", {icon: 2});
            },
            cancel: function () {
                layer.msg("操作已取消...", {icon: 2});
            }
        });
    }

    /**
     * 提交表单
     */
    function submitForm() {
        var typeId = $("#typeId").val();
        var typeForm = $("#typeForm").serializeArray();
        $.ajax({
            type: "POST",
            url: "/bookmall/admin/type/edit",
            data: typeForm,
            success: function (res) {
                if (res) {
                    if (typeId != "") {
                        layer.msg("信息修改成功~", {time: 1500}, function () {
                            document.getElementById("typeForm").reset();
                            window.parent.parent.document.getElementById("multitabs_types").contentWindow.location.reload(true);
                        });
                    } else {
                        layer.msg("信息添加成功~", {time: 1500}, function () {
                            document.getElementById("typeForm").reset();
                            window.parent.parent.document.getElementById("multitabs_types").contentWindow.location.reload(true);
                        });
                    }
                } else {
                    if (typeId != undefined) {
                        layer.msg("信息修改失败！请确认信息是否完整或联系管理员!", {time: 2000}, function () {
                            document.getElementById("typeForm").reset();
                            window.parent.parent.document.getElementById("multitabs_types").contentWindow.location.reload(true);
                        });
                    } else {
                        layer.msg("信息添加失败！请确认信息是否完整或联系管理员!", {time: 2000}, function () {
                            document.getElementById("typeForm").reset();
                            window.parent.parent.document.getElementById("multitabs_types").contentWindow.location.reload(true);
                        });
                    }
                }
            }
        });
    }
</script>
</body>
</html>
